<template>
    <div class="container">
        <template v-if="articles.length === 0 || this.error === 0">
        <el-main class="mymain">
            <el-card class="mycard">
                        <div slot="header" class="card-header">
                           <div class="title">{{ this.rss.title }}</div>
                            <div class="count">{{ this.rss.count }}</div>
                            <!-- <time class="time">{{ this.rss.url }}</time> -->
                             <el-popover
                                placement="top"
                                v-model="visible1"
                                class="more">
                                <el-card class="box-card">
                                    <el-row>
                                            <el-col style="margin-bottom: 5px; display: flex;justify-content: center;align-items: center;"> <el-button  type="text" style="font-size: 20px;" icon="el-icon-refresh" @click="refresh()">刷新</el-button></el-col>
                                            <el-col style="margin-bottom: 5px; display: flex;justify-content: center;align-items: center;"> <el-button style="font-size: 20px;" v-if="(this.rss.title != '稍后阅读')" type="text" icon="el-icon-check" @click="restate">全部标记为已读</el-button></el-col>
                                            <el-col style="margin-bottom: 5px; display: flex;justify-content: center;align-items: center;"> <el-button v-if="(this.rss.title != '全部文章' && this.rss.title != '稍后阅读')" type="text" style="color: #fa0404;font-size: 20px;" icon="el-icon-delete" @click="delete_()">取消订阅</el-button></el-col>
                                        </el-row>
                                </el-card>
                                <el-button  slot="reference" type="text" icon="el-icon-more-outline" style="text-align: right;font-size: 20px;"></el-button>
                            </el-popover>
                             
                        </div>
                        <div class="card-info">
                            
                            <div class="card-description">{{ this.rss.description }}</div>
                            <time class="time" style="font-size: 12px;">{{ this.rss.url }}</time>
                        </div>
                    </el-card>
                    <el-skeleton :rows="16"  />
        </el-main>
        <el-empty description="无选中项" style="margin-left: 250px;"></el-empty>
        </template>
        <template v-else>  <el-main class="custom-main" >
                <el-card class="mycard">
                    <div slot="header" class="card-header">
                       <div class="title">{{ this.rss.title }}</div>
                        <div class="count">{{ this.rss.count }}</div>
                         <el-popover
                            placement="top"
                            v-model="visible1"
                            class="more">
                            <el-card class="box-card">
                                <el-row>
                                        <el-col style="margin-bottom: 5px; display: flex;justify-content: center;align-items: center;"> <el-button  type="text" style="font-size: 20px;" icon="el-icon-refresh" @click="refresh()">刷新</el-button></el-col>
                                        <el-col style="margin-bottom: 5px; display: flex;justify-content: center;align-items: center;"> <el-button style="font-size: 20px;" v-if="(this.rss.title != '稍后阅读')" type="text" icon="el-icon-check" @click="restate">全部标记为已读</el-button></el-col>
                                        <el-col style="margin-bottom: 5px; display: flex;justify-content: center;align-items: center;"> <el-button v-if="(this.rss.title != '全部文章' && this.rss.title != '稍后阅读')" type="text" style="color: #fa0404;font-size: 20px;" icon="el-icon-delete" @click="delete_()">取消订阅</el-button></el-col>
                                    </el-row>
                            </el-card>
                            <el-button  slot="reference" type="text" icon="el-icon-more-outline" style="text-align: right;font-size: 20px;"></el-button>
                        </el-popover>
                    </div>
                    <div class="card-info">
                        <div class="card-description">{{ this.rss.description }}</div>
                         <time class="time" style="font-size: 12px;">{{ this.rss.url }}</time>
                    </div>
                </el-card>
                <el-col  v-for="article in articles" :key="article.id" @click.native="handleCardClick(article)">
                    <el-card class="card-item" shadow="hover">
                        <div slot="header" class="card-header">
                            <el-badge v-if="!article.is_read" is-dot class="item" type="primary"></el-badge>
                            <strong class="card-title">{{ article.title }}</strong>
                        </div>
                        <div class="card-info">
                            <time class="time">{{ article.published_at }}</time>
                            <div class="card-description">{{ article.description }}</div>
                        </div>
                        <div> 
                            <el-tooltip class="item" effect="dark" content="稍后阅读" placement="bottom">
                                <el-button @click="bookmark(article.id)" type="warning" style="font-size: 15px;" circle>
                                    <i v-if="!article.is_favorite" class="el-icon-star-off"></i>
                                    <i v-else class="el-icon-star-on"></i>
                                </el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="标为已/未读" placement="bottom">
                                <el-button type="success" @click="re_is_read(article.id)"  circle>
                                    <i v-if="article.is_read" class="el-icon-circle-check"></i>
                                    <i v-else class="el-icon-circle-close"></i>
                                 </el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="分享" placement="bottom"><el-button type="info" @click="myshare" icon="el-icon-share" style="font-size: 15px;margin-left: 10px;" circle></el-button></el-tooltip>
                             <el-tooltip class="item" effect="dark" content="从新的标签页打开" placement="bottom"><el-button type="info" @click="newopen(article.link)" icon="el-icon-s-promotion" style="font-size: 15px;margin-left: 10px;" circle></el-button></el-tooltip>  
                        </div>
                    </el-card>
                </el-col>
            </el-main>
            <iframe  v-if="showIframe" :src="iframeSrc" scrolling="auto" frameborder="0" id="iframe"></iframe>
        <div v-else class="empty-state">
          <el-empty description="无选中项"></el-empty>
        </div>
        </template>
       
        
    </div>
</template>
<script>
import axios from 'axios';
import NativeShare from 'nativeshare'
export default {
    data() {
        return {
            categories: [],
            articles: [],
            rss:'',
            articleId: null,
            error: '',
            iframeSrc: '',
            showIframe: false,
            visible1: false,
            visible2: false,
            rss_id: '',
            uploadUrl: 'http://localhost:5000/upload',
            fileList: []
        };
    },

    computed: {
        defaultOpeneds() {
            return this.categories.map(category => category.id.toString());
        },
    },
    created() {
        this.articleId = this.$route.params.id;
        console.log(this.articleId);
    },
    mounted() {
    this.get_rss_info()   
    },
    methods: {
         changeIcon() {
            this.isIconChanged = !this.isIconChanged;
        },
        get_rss_info() {
            axios
                .get(`http://localhost:5000/get_rss_info/${this.articleId}`)
                .then(response => {
                    console.log("???")
                    this.rss = response.data;
                    console.log(this.rss)
                    if (response.data.error)
                        this.error = 0;
                    console.log(this.articles)
                })
                .catch(error => {
                    console.error(error);
                    console.log(this.error)
                });
                
         },
       handleCardClick(article) {
            this.showIframe = true;
            this.restate(article.id)
            this.fetchArticles();
            // location.reload();
            this.iframeSrc = article.link;
            console.log(this.iframeSrc);
        },
        rename() { },
        refresh() { 
            this.get_rss_info()
            console.log(this.rss.url)
            console.log(this.rss.id)
            axios.post('http://localhost:5000/crawl-articles', { rss_url: this.rss.url ,feed_id:this.rss.id})
                .then(response => {
                    this.crawlStatus = response.data.message;
                     this.$message({
                        type: 'success',
                        message: '刷新成功！'
                     });
                    // this.fetchArticles()
                })
                .catch(error => {
                    this.crawlStatus = '爬取文章出现错误：' + error.message;
                });
                // window.location.reload()
                this.fetchArticles()
        },
        re_is_read(id) {
            console.log(id)
            axios
                .get(`http://localhost:5000/update-article-read-state/${id}`)
                .then(response => {
                    if (response.data.error)
                        this.error = 0;
                    this.$message({
                        type: 'success',
                        message: '已成功更新标记！'
                    });
                })
                .catch(error => {
                    console.error(error);
                    console.log(this.error)
                });
                this.fetchArticles();
        },
        restate(id) {
             console.log(id)
            axios
                .get(`http://localhost:5000/update-article-read/${id}`)
                .then(response => {
                    if (response.data.error)
                        this.error = 0;
                     this.$message({
                        type: 'success',
                        message: '文章已标记为已读！'
                    });
                })
                .catch(error => {
                    console.error(error);
                    console.log(this.error)
                });
        },
        bookmark(id) {
            console.log(id)
            axios
                .get(`http://localhost:5000/update-article-bookmark/${id}`)
                .then(response => {
                    if (response.data.error)
                        this.error = 0;
                    this.$message({
                        type: 'success',
                        message: '阅读状态已更新！'
                    });
                })
                .catch(error => {
                    console.error(error);
                    console.log(this.error)
                });
                this.fetchArticles();
        },
        delete_() { 
            this.get_rss_info()
            const id = this.rss.id
            console.log(id)
            axios
                .get(`http://localhost:5000/delete-rss/${id}`)
                .then(response => {
                    if (response.data.error)
                        this.error = 0;
                    this.$message({
                        type: 'success',
                        message: '已成功取消订阅！'
                    });
                })
                .catch(error => {
                    console.error(error);
                    console.log(this.error)
                });
            this.fetchArticles();
        },
        myshare() { 
            let nativeShare = new NativeShare()

            nativeShare.setShareData({
                icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
                link: 'https://github.com/fa-ge/NativeShare',
                title: 'NativeShare',
                desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
                success: function () {
                    alert('success')
                },
                fail: function () {
                    alert('fail')
                }
            })
            try {
                nativeShare.call('wechatFriend')//
                // 如果是分享到微信则需要 nativeShare.call('wechatFriend')
                // 类似的命令有
                //  default 默认，调用起底部的分享组件，当其他命令不支持的时候也会调用该命令
                //  wechatTimeline 分享到朋友圈
                //  wechatFriend 分享给微信好友
                //  qqFriend 分享给QQ好友
                //  qZone 分享到QQ空间
                //  weibo 分享到微博
                alert('成功')
            } catch (err) {
                // 如果不支持，你可以在这里做降级处理
                alert(err)
            }

        },
        newopen(url) {
            window.open(url,'_blank')
        },
        fetchArticles() {
            console.log(this.articleId)
            axios
                .get(`http://localhost:5000/get-article/${this.articleId}`)
                .then(response => {
                    this.articles = response.data;
                    if (response.data.error) 
                        this.error = 0;
                    console.log(this.articles)
                })
                .catch(error => {
                    console.error(error);
                    console.log(this.error)
                });
        },
    },
   beforeRouteUpdate(to, from, next) {
        // 在路由参数更新时触发
        this.articleId = to.params.id;
        this.error = 1
        this.showIframe = false
        this.get_rss_info()
        this.fetchArticles();

        next();
    },
    beforeUpload(file) {
        // 在上传前的钩子函数中，将文件添加到文件列表
        this.fileList.push(file);
        return false; // 阻止自动上传
    },
    upload() {
        // 手动触发上传
        this.$refs.upload.submit();
    },
    handleSuccess(response) {
        // 上传成功后的回调函数
        console.log(response);
        // 处理上传成功后的操作
    },
    handleError(error) {
        // 上传失败后的回调函数
        console.error(error);
        // 处理上传失败后的操作
    }
};
</script>

<style>
.container {
    display: flex;
}

.custom-main {
    flex-grow: 1;
    width: 55%;
}

.empty-state {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iframe-container {
  height: 100vh;
  width: 60%;
}

iframe{
  height: 100%;
  width: 100%;
}
.title {
  font-weight: bold;
  font-size: 20px;
  margin-right: 10%;
}

.no-more-items{
    width: 100%;
}
.count {
  font-size: 20px;
  color: #888;
  margin-right: 50%;
}

.more{
    text-align: right;
}

.card-item {
    width: 400px;
    margin-bottom: 10px;
    border-radius: 10px; /* 添加圆角样式 */
    transition: box-shadow 0.3s; /* 添加过渡效果 */
}

.mycard{
    width: 400px;
    margin-bottom: 10px;
    border-radius: 10px; /* 添加圆角样式 */
    transition: box-shadow 0.3s; /* 添加过渡效果 */
}

</style>
